<script setup>
import { ref } from 'vue';

const option1Checked = ref(true);
const option2Checked = ref(false);
const option3Checked = ref(true);
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Menu Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Menu</h3>
        <div class="flex flex-col space-y-4">
          <Menu>
            <template #trigger>
              <Button>Open Menu</Button>
            </template>
            <MenuList>
              <MenuItem>New File</MenuItem>
              <MenuItem>Open...</MenuItem>
              <MenuItem>Save</MenuItem>
              <MenuItem disabled>Save As...</MenuItem>
              <MenuItem>Exit</MenuItem>
            </MenuList>
          </Menu>
        </div>

        <div class="mt-6">
          <h4 class="mb-2 text-sm font-medium">Menu with Checkable Items</h4>
          <Menu>
            <template #trigger>
              <Button>Options Menu</Button>
            </template>
            <MenuList>
              <MenuItem
                type="checkbox"
                :checked="option1Checked"
                @click="option1Checked = !option1Checked"
              >
                Show Line Numbers
              </MenuItem>
              <MenuItem
                type="checkbox"
                :checked="option2Checked"
                @click="option2Checked = !option2Checked"
              >
                Word Wrap
              </MenuItem>
              <MenuItem
                type="checkbox"
                :checked="option3Checked"
                @click="option3Checked = !option3Checked"
                disabled
              >
                Auto Save (Disabled)
              </MenuItem>
            </MenuList>
          </Menu>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Menu Variations</h3>
        <div class="flex flex-col space-y-8">
          <div>
            <h4 class="mb-2 text-sm font-medium">Open on Hover</h4>
            <Menu open-on-hover>
              <template #trigger>
                <Button>Hover Me</Button>
              </template>
              <MenuList>
                <MenuItem>Option 1</MenuItem>
                <MenuItem>Option 2</MenuItem>
                <MenuItem>Option 3</MenuItem>
              </MenuList>
            </Menu>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Right-Click (Context Menu)</h4>
            <Menu open-on-context>
              <template #trigger>
                <div
                  class="flex h-16 w-full items-center justify-center rounded-md border border-dashed"
                >
                  Right-click on this area
                </div>
              </template>
              <MenuList>
                <MenuItem>Cut</MenuItem>
                <MenuItem>Copy</MenuItem>
                <MenuItem>Paste</MenuItem>
                <MenuItem>Delete</MenuItem>
              </MenuList>
            </Menu>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Split Menu</h4>
            <Menu split>
              <template #trigger>
                <Button>Split Menu</Button>
              </template>
              <MenuList>
                <MenuItem>Default Action</MenuItem>
                <Divider />
                <MenuItem>Other Action 1</MenuItem>
                <MenuItem>Other Action 2</MenuItem>
              </MenuList>
            </Menu>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Menu with Submenu</h4>
            <Menu>
              <template #trigger>
                <Button>Menu with Submenu</Button>
              </template>
              <MenuList>
                <MenuItem>Action 1</MenuItem>
                <MenuItem>
                  Submenu
                  <Menu>
                    <MenuList>
                      <MenuItem>Sub-option 1</MenuItem>
                      <MenuItem>Sub-option 2</MenuItem>
                    </MenuList>
                  </Menu>
                </MenuItem>
                <MenuItem>Action 3</MenuItem>
              </MenuList>
            </Menu>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Using MenuButton</h4>
            <Menu>
              <template #trigger>
                <MenuButton>Menu Button</MenuButton>
              </template>
              <MenuList>
                <MenuItem>Option 1</MenuItem>
                <MenuItem>Option 2</MenuItem>
                <MenuItem>Option 3</MenuItem>
              </MenuList>
            </Menu>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
